<!DOCTYPE html>
<html lang="en">
	<head>
		<link
			rel="icon"
			href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">⛱️</text></svg>'
		/>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>router-basics · @thi.ng/umbrella</title>
		<link
			href="https://unpkg.com/tachyons@4/css/tachyons.min.css"
			rel="stylesheet"
		/>
		<style>
			#debug {
				position: relative;
			}

			a.toggle {
				display: inline-block;
				transform: rotate(-90deg);
				margin: 0;
				padding: 0.25rem 0.5rem;
				position: absolute;
				top: 3rem;
				background: #eee;
				color: black;
				text-align: right;
				text-decoration: none;
				border-top-right-radius: 5px;
				border-top-left-radius: 5px;
				font-size: 0.875rem;
				font-weight: 700;
			}

			#debug.open a.toggle {
				left: -0.5rem;
			}

			#debug.close a.toggle {
				right: -1rem;
			}

			#debug.close pre {
				display: none;
			}

			.fadeout {
				opacity: 0;
				transition: opacity 0.5s ease-in;
				transition-delay: 0.5s;
			}
		</style>
		<script>
			window.goatcounter = { path: (p) => location.host + p };
		</script>
		<script
			data-goatcounter="https://thing.goatcounter.com/count"
			async
			src="//gc.zgo.at/count.js"
		></script>
	</head>

	<body>
		<div id="app"></div>
		<footer class="fixed bottom-0 z-1 pa2 w-100 bg-black gray sans-serif">
			<a
				class="link moon-gray"
				href="https://github.com/thi-ng/umbrella/tree/develop/examples/router-basics"
				>Source code</a
			>, images by
			<a class="link moon-gray" href="https://www.instagram.com/manomine/"
				>@manomine</a
			>
		</footer>
		<script type="module" src="/src/index.ts"></script>
	</body>
</html>
